<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  请选择一个yes/no的问题：
  <input v-model.lazy="question">
  <p>{{answer}}</p>
</div>
<script type="module">
import {createApp, ref, watch} from './node_modules/vue/dist/vue.esm-browser.js'

createApp({
  setup() {
    const question = ref('')
    const answer = ref('')

    watch(question, async (newValue, onlValue) => {
      const response = await fetch('https://yesno.wtf/api')
      const data = await response.json()
      answer.value = data.answer
    })

    return {
      question,
      answer
    }
  }
}).mount('#app')

</script>
</body>
</html>
